<template>
  <div>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
        height="860"
      >
        <el-table-column type="index" label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.id == ''" style="color: red">*</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="模板名称" align="center" width="180"
          ><template slot-scope="scope">
            <span v-if="scope.row.name !== ''">{{ scope.row.name }}</span>
            <el-input
              v-else
              v-model="nameInput"
              type="textarea"
              resize="none"
              :rows="2"
              placeholder="填写模板名称"
            ></el-input> </template
        ></el-table-column>
        <el-table-column prop="content" label="模板内容" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.content !== ''">{{ scope.row.content }}</span>
            <el-input
              v-else
              v-model="contentInput"
              type="textarea"
              resize="none"
              :rows="2"
              placeholder="填写模板内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.id"
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
            <el-button v-else type="text" @click="saveHandler(scope.row)">确定</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="footerDiv mt-10" style="text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  getScheduleTemplate,
  scheduleTemplateDetail,
  saveScheduleTemplate,
  updateScheduleTemplate,
  deleteScheduleTemplate,
} from "/src/http/productSchedule/scheduleCommandTemplate.js";
export default {
  data() {
    return {
      nameInput: "",
      contentInput: "",
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
    };
  },

  mounted() {
    this.getScheduleTemplateApi();
  },

  methods: {
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v;
      this.getScheduleTemplateApi(this.currentPage, v);
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v;
      this.getScheduleTemplateApi(v, this.pageSize);
    },
    // 确定
    saveHandler(v) {
      console.log("确定::: ", v);
      if (this.nameInput == "" || this.contentInput == "") {
        this.$message.error("请填写完整内容");
      } else {
        let params = {
          name: this.nameInput,
          content: this.contentInput,
        };
        this.saveScheduleTemplateApi(params);
      }
      this.nameInput = "";
      this.contentInput = "";
    },
    // 删除
    deleteHandler(v) {
      this.$confirm("此操作将永久删除该信息?", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteScheduleTemplateApi(v);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 接口
     */
    // 分页查询调度模板
    getScheduleTemplateApi(pageNum = 1, pageSize = 10) {
      let params = {
        pageNum,
        pageSize,
      };
      getScheduleTemplate(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records;
          this.total = res.data.total;
          // 返回数据长度大于等于pageSize，不增加一行空白课可编辑区域
          if (res.data.records.length >= this.pageSize) return;
          //查询到分页数据后再新增一行空白可编辑区域
          this.renderData.push({
            id: "",
            name: "",
            content: "",
          });
        }
      });
    },
    // id查询调度模板详情
    scheduleTemplateDetailApi(params) {
      scheduleTemplateDetail(params).then((res) => {
        if (res.code == 200) {
          console.log("res::: ", res);
        }
      });
    },
    // 保存调度模板
    saveScheduleTemplateApi(params) {
      saveScheduleTemplate(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          let pgn =
            Number.isInteger(this.total / this.pageSize) == true
              ? this.total / this.pageSize + 1
              : Math.ceil(this.total / this.pageSize);
          this.getScheduleTemplateApi(pgn, this.pageSize);
          this.currentPage = pgn;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 更新调度模板
    updateScheduleTemplateApi(params) {
      updateScheduleTemplate(params).then((res) => {
        if (res.code == 200) {
          this.getScheduleTemplateApi(this.currentPage, this.pageSize);
        }
      });
    },
    // 删除调度模板
    deleteScheduleTemplateApi(params) {
      deleteScheduleTemplate(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          if (this.renderData.length == 1 && this.total / this.pageSize > 1) {
            this.getScheduleTemplateApi(this.currentPage - 1, this.pageSize);
            this.currentPage = this.currentPage - 1;
          } else {
            this.getScheduleTemplateApi(this.currentPage, this.pageSize);
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// :deep(.el-input__inner) {
//   border: none;
//   background-color: rgba(255, 255, 255, 0);
// }
:deep(.el-textarea__inner) {
  //   pointer-events: none;
  border: none !important;
  background-color: rgba(255, 255, 255, 0);
  resize: none;
}
</style>
